<template>
  <div>
    <p>搜索栏</p>
    <SearchForm :columns="searchCol" :searchParam="searchParam"></SearchForm>
    <SearchForm2 :columns="searchCol" :searchParam="searchParam">
    <template #btn>
   <el-button type="primary">新增</el-button> 
   <el-button type="primary">导出</el-button> 
    </template>
    </SearchForm2>
  </div>
</template>

<script setup>
import SearchForm from '_c/searchForm/index.vue'
import SearchForm2 from '_c/searchForm/index2.vue'
import { reactive } from 'vue'
const searchParam = reactive({
  name: '1'
})
const searchCol = [
  {
    prop: "name0", // 搜索框 key
    label: "信息名称", // 搜索框提示词
    typeName: "el-input",
    attrs: {
    },
  },
  {
    prop: "name1", // 搜索框 key
    label: "下拉框", // 搜索框提示词
    typeName: "cy-select",
    attrs: {
      clearable:true,
      data: [
        { value: 1, label: '测试' }
      ]
    },
  },
  {
    prop: "name2", // 搜索框 key
    label: "树选择框", // 搜索框提示词
    typeName: "el-tree-select",
    attrs: {
      data: [
        {
          value: 1, label: '测试',
          children: [
            { value: 'd2', label: 'child测试' }
          ]
        },
        { value: 2, label: '测试2' },
      ]
    },
  },
  {
    prop: "name3", // 搜索框 key
    label: "单选框", // 搜索框提示词
    typeName: "cy-radio-group",
    attrs: {
      data: [
        { value: 1, label: '测试' },
        { value: 2, label: '测试2' },
      ]
    },
  },
  {
    prop: "name4", // 搜索框 key
    label: "时间", // 搜索框提示词
    typeName: "el-date-picker",
    attrs: {
      format: 'YYYY-MM-DD',
     clearable:true
    },
  },
  {
    prop: "name4", // 搜索框 key
    label: "时间范围", // 搜索框提示词
    typeName: "el-date-picker",
    attrs: {
      type:'range',
      format: 'YYYY-MM-DD',
     clearable:true
    },
  },
  {
    prop: "name5", // 搜索框 key
    label: "复选框", // 搜索框提示词
    typeName: "cy-checkbox-group",
    attrs: {
      data: [{
        label:'篮球',value:1,
      },{
        label:'足球',value:2
      }]
    },
  }

]
</script>

<style lang="scss" scoped></style>